INF385T UX Prototyping
HW Instructions
Spring 2023
Ninety percent of your grade comes from the following work. The other ten percent consists of peer reviews, described in the syllabus. Also note that the syllabus describes the attendance policy. That can negatively impact the grade you earn.
Milestones (35 percent of your grade)
Overview
For seven of the weeks we meet, you will submit a milestone in Canvas. Note that all work is to be submitted via Canvas. Don’t send me any attachments in emails or I will deduct points from the relevant score!
I will assign seven groups of five.
You will complete a prototype milestone by Monday at 9pm via Canvas, via a plain text document (not a word processing document) containing the URL of the page for the current milestone on your group website. That website will contain (A) text describing your current milestone and (B) a link to your actually prototype, for example on Figma or Framer. Only one person from your group will submit the plain text document to Canvas, and it will be named with that person’s initials followed by dot txt. In other words, if I were to make such a submission, it would be called mm.txt and would not be in Word or pdf format but rather plain text, as can be generated in any text editor such as pico or textedit. There should be only one line in the file, and that line should contain only one URL, so that I can automatically parse all the submitted files.
That week’s evaluating group will then review the submissions and come to class prepared to present a ranked top 3 list that they find the most compelling.
The week’s evaluating group will provide two documents via Canvas, (1) the slideshow presentation (in pdf format) of the top three submissions, and (2) a series of seven pdfs, one evaluating each group. The first document will be named milestoneNfeedback.pdf and the series of group feedback documents will be named milestoneNgroupMfeedback.pdf. Any deviation of these names slows down my grading scripts and results in points deducted, including the first time you do it.
Details
The milestones are mostly connected to each other, with the eventual goal of a portfolio piece.
Milestone 1 — accessibility
Unlike most milestones, for this one you will evaluate a website for accessibility. The purpose of this is to awaken you to the need for accessibility before you start creating your own prototypes so that you bake accessibility into your prototypes rather than having to scramble to add it as an afterthought.
You will run an accessibility check on a website of your choosing. You can use this ATAG report tool to help you https://www.w3.org/WAI/atag/report-tool/principle/1
- Evaluate three pages of any website using at least 3 WCAG 2.1 criteria on each page, e.g., 1.4.11 non text contrast.
- Let us know if the page passes and why it passed.
- Create screens for how you would improve its accessibility and justify your solution.
- Deliver (a) your analysis as a pdf report, and (b) 3 mid-fi wireframes, one for each page, of your improved solution. The report should be a pdf submitted to Canvas, while the wireframes should be a Figma or Framer or XD (or other) prototype. Submit a plain text file with a .txt extension including ONLY the link to the prototype. Make sure the instructor can view the prototype. Afterward, you should add the pdf and the link to the milestone 1 page of your group’s website.
FAQ
What does mid-fi mean in this context? Focus on color, typography, and layout, without consideration of animation or navigation unless the accessibility improvements require them.
For each page we evaluate, can we use the same WCAG criteria on each page? NO!
What happens if our website is perfect and is completely accessible? Try another website.
What tools should we use? Use any tools you want, such as WAVE, Andi, Contrast, Manual, or others.
Are we limited to AA or A criteria? Use whichever you want for each page.
Can you give us an example of a fantastic job on this milestone? Yes, look in Canvas at the files m1exampleReport.pdf and m1examplePrototype.txt.
Other tips
- Provide the reader context and your reasoning for your evaluation.
- It would be valuable to see your justification and logic.
- Refer back to the original issue when presenting your solution.
- Consider inclusive design.
- Visual impairment errors that fail WCAG are comparatively easy to fix.